<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star Times CMS</title>
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/scroll.css}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #bdd0db;
        }

        #header {
            /*background-color: #2a83cf;*/
            background-color: #2f2f2f;
            background-repeat: no-repeat;
            height: 75px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
        }

        #aside {
            position: fixed;
            top: 75px;
            left: 0;
            bottom: 25px;
            width: 180px;
            background: #eaedf1;
            font-size: 14px;
            overflow: auto;
            user-select: none;
        }

        #logo {
            width: 100%;
            height: 100%;
            font-size: 26px;
            transition: all 1s;
        }

        #logo:hover {
            transform: translateX(20px);
        }

        #aside-head {
            padding: 13px 8px;
            color: #8f9092;
            font-weight: bold;
            background-color: #d9dee4;
            margin-bottom: 25px;
            text-align: center;
        }

        .ul {
            color: #8f9092;
            user-select: none;
            box-sizing: border-box;
            width: 100%;
            padding: 10px 8px;
            /*border-bottom: 1px solid #bdd0db;*/
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

        .ul > .iup {
            position: absolute;
            right: 10px;
            top: 13px;
        }

        .ul:hover {

        }

        .down {
            display: none;
            /*background-color: #f2f3f7;*/
        }

        .down > .down-item {
            color: #8f9092;
            cursor: pointer !important;
            font-size: 13px;
            padding: 10px 0 10px 30px;
            transition: background-color 0.5s;
        }

        .down > .down-item:hover {
            /*color: #2a83cf;*/
            /*background-color: #fff;*/
        }

        .item-active {
            background-color: #f2f3f7 !important;
        }

        #header-left, #header-right {
            user-select: none;
            color: white;
            cursor: pointer;
        }

        #header-left {
            line-height: 75px;
        }

        #header-right {
            line-height: 75px;
        }

        #header-right span {
            margin: 0 8px;
        }

        #main {
            position: fixed;
            top: 75px;
            left: 180px;
            right: 0;
            bottom: 25px;
            overflow: auto;
            background-color: #fff;
            padding: 5px;
            display: flex;
        }

        #footer {
            position: fixed;
            bottom: 0;
            height: 25px;
            left: 0;
            right: 0;
            background-color: #2f2f2f;
        }

        #footer {
            display: flex;
        }

        #footer p {
            color: #ffba3b;
            font-size: 12px;
            text-align: center;
            line-height: 25px;
        }

        #footer p a {
            color: #ffba3b;
        }

        #kj {
            border: none;
            width: 100%;
            height: 100%;
            align-items: center;
            user-select: none;
        }

        #time {
            text-align: left;
            display: inline-block;
            width: 150px;
        }

    </style>
</head>
<body>
<div id="header">
    <div id="header-left">
        <div id="logo">
            Star <span style="color: #1d7db1;">Times</span> CMS
        </div>
    </div>
    <div id="header-right">
        <!--        <span>欢迎你，管理员</span>-->
        <span class="nav-btn">
            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
            <span th:text="${session.user.username}"></span>
        </span>
        <span class="nav-btn" onclick="location.href='logout'"><i class="fa fa-sign-out"
                                                                  aria-hidden="true"></i> EXIT</span>
    </div>
</div>

<div id="aside">

    <div style="width: 100%;height: 100%;">
        <div id="aside-head">STAR Timers CMS</div>
        <div class="ul" onclick="go('admin/home.html')">
            <i class="fa fa-home" aria-hidden="true"></i>
            欢迎页
        </div>
        <div class="ul">
            <i class="fa fa-briefcase" aria-hidden="true"></i>
            办公管理
            <i class="fa fa-angle-up iup" aria-hidden="true"></i>
        </div>
        <div class="down">
            <div class="down-item" onclick="go('admin/office/advice')">
                <i class="fa fa-envelope-o" aria-hidden="true"></i>
                信息一览
            </div>
            <div class="down-item" onclick="go('admin/office/drawBed')">
                <i class="fa fa-picture-o" aria-hidden="true"></i>
                在线图床
            </div>
        </div>
        <div class="ul">
            <i class="fa fa-download" aria-hidden="true"></i>
            下载专区
            <i class="fa fa-angle-up iup" aria-hidden="true"></i>
        </div>
        <div class="down">
            <div class="down-item" onclick="go('admin/download/list')">
                <i class="fa fa-gavel" aria-hidden="true"></i>
                技术资料
            </div>
            <div class="down-item" onclick="go('9.html')">
                <i class="fa fa-send" aria-hidden="true"></i>
                面试资料
            </div>
        </div>
        <div class="ul">
            <i class="fa fa-cog" aria-hidden="true"></i>
            系统管理
            <i class="fa fa-angle-up iup" aria-hidden="true"></i>
        </div>
        <div class="down">
            <div class="down-item" onclick="go('admin/sys/user?currentPage=1&pageSize=10')">
                <i class="fa fa-user-circle" aria-hidden="true"></i>
                用户管理
            </div>
            <div class="down-item" onclick="go('admin/sys/advice')">
                <i class="fa fa-volume-up" aria-hidden="true"></i>
                通知管理
            </div>
            <div class="down-item" onclick="go('admin/sys/download/file_upload')">
                <i class="fa fa-file" aria-hidden="true"></i>
                资料管理
            </div>
            <div class="down-item" onclick="go('admin/sys/log?currentPage=1&pageSize=10')">
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                日志管理
            </div>
            <div class="down-item" onclick="go('admin/sys/data_monitoring')">
                <i class="fa fa-line-chart" aria-hidden="true"></i>
                监控管理
            </div>


        </div>
    </div>
</div>

<div id="main">
    <iframe id="kj" src="admin/home"></iframe>
</div>
<div id="footer">
    <p>本站累计运行：<span id="time"></span>
        <!--累计登录：<span id="loginCount">0</span>人/次-->
    </p>
    <p style="margin: 0 auto;">
        Copyright © 2020 - 2021 星时代爪哇 scsoul.top All Rights Reserved.
        <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration: none;">蜀ICP备2020030393号-1</a>
    </p>
    <p>Running by SpringBoot on Linux version 1.3.2</p>
</div>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/MiniDialog-es5.min.js"></script>
<script th:inline="javascript">
    function go(url) {
        $("#kj").attr("src", url);
    }

    function transTime(time) {
        if (time === '') {
            return '';
        } else {
            var result = '';
            if (time >= 1000) {
                var day = parseInt(time / (24 * 60 * 60 * 1000));
                var hour = parseInt((time % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
                var minute = parseInt(((time % (24 * 60 * 60 * 1000)) % (60 * 60 * 1000)) / (60 * 1000));
                var second = parseInt((((time % (24 * 60 * 60 * 1000)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000);
                if (day != 0) {
                    result += day + '天';
                }
                if (hour != 0) {
                    result += hour + '时';
                }
                if (minute != 0) {
                    result += minute + '分';
                }
                if (second != 0) {
                    result += second + '秒';
                }
            }
            if (result == '') {
                result = '0秒';
            }
            return result;
        }
    }

    function renderRunTimeTotal(serverStarTime) {
        let date = new Date().getTime();
        let runTimeTotal = date - serverStarTime;
        $("#time").text(transTime(runTimeTotal))
    }

    $(function () {
        $("#aside .ul").click(function () {
            if($(this).index()==1){
                $(".down-item").removeClass("item-active");
            }

            //是否有开的
            //$(".down").stop().slideUp();
            $(this).next().stop().filter(".down").slideToggle();

            var $iup = $(this).children(".iup");
            if ($iup.hasClass("fa-angle-up")) {
                $iup.removeClass("fa-angle-up").addClass("fa-angle-down");
            } else {
                $iup.removeClass("fa-angle-down").addClass("fa-angle-up");
            }
        })

        $(".down-item").click(function() {
            $(".down-item").removeClass("item-active");
            $(this).addClass("item-active");
        })



        let serverStarTime = new Date("2021-01-01").getTime();
        renderRunTimeTotal(serverStarTime)

        setInterval(function () {
            renderRunTimeTotal(serverStarTime)
        }, 1000)
    })
</script>
</body>
</html>